<template>
	<div class="my">
		<div class="fixed-box">
			<div class="my-top">
				<div class="my-top-body">
					<div class="icon-name">
						<div class="user-icon"><img :src="userAvatar" alt="" @error="noImg"></div>
						<div class="user-info">
							<div class="user-name">
								<div class="user-name-fonts">{{userData.loginName}}</div>
							</div>
							<span class="user-time">{{userData.level}}</span>
						</div>
					</div>
					<img class="to-help" @click="toPush(6)" src="../../../static/images/agent-help-icon.png" alt="">
				</div>
			</div>
			<div class="balance-area">
				<div class="balance-area-title">
					<img src="../../../static/images/agent-my-balance.png" alt="" class="balance-area-title-icon">
					<div class="balance-area-title-fonts">代理佣金</div>
				</div>
				<div class="balance-area-content">
					<div class="balance-area-content-left" @click="refreshBalance()">
						<span class="balance-area-content-left-fonts">可取款金额：</span>
						<span class="balance-area-content-left-cash">{{userData.money}}</span>
						<van-icon v-if="!isActive" name="replay"/>
						<van-loading v-if="isActive" type="spinner" size="20px"/>
					</div>
					<div class="balance-area-content-center"></div>
					<van-button class="balance-area-content-right" round type="info" color="#00459E" @click="toPush(1)">提现</van-button>
				</div>
			</div>
		</div>
		<div class="my-content">
			<div class="my-content-list" @click="toPush(2)">
				<div class="my-content-list-left">
                    <div class="img-box">
                        <img src="../../../static/images/agent-my-userinfo.png" alt="" class="my-content-list-left-icon">
                    </div>
					<div class="my-content-list-left-fonts">个人资料</div>
				</div>
				<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="my-content-list-right">
			</div>
			<div class="my-content-list" @click="toPush(3)">
				<div class="my-content-list-left">
                    <div class="img-box">
                        <img src="../../../static/images/agent-my-promote.png" alt="" class="my-content-list-left-icon">
                    </div>
					<div class="my-content-list-left-fonts">推广数据</div>
				</div>
				<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="my-content-list-right">
			</div>
			<div class="my-content-list" @click="toPush(4)">
				<div class="my-content-list-left">
                    <div class="img-box">
                        <img src="../../../static/images/agent-my-safecenter.png" alt="" class="my-content-list-left-icon">
                    </div>
					<div class="my-content-list-left-fonts">安全中心</div>
				</div>
				<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="my-content-list-right">
			</div>
            <div class="collapse-list-box" :class="cashManage === true?'collapse-list-box-activing':''" @click="cashManage = !cashManage">
                <div class="my-content-list">
                    <div class="my-content-list-left">
                        <div class="img-box">
                            <van-icon name="after-sale" color="#383D4C" size=".56rem"/>
                        </div>
                        <div class="my-content-list-left-fonts">资金管理</div>
                    </div>
                    <img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="my-content-list-right" :class="cashManage === true?'list-icon-activing':''">
                </div>
                <div class="collapse-list flex-b" @click="toPush(7)">
                    <div class="flex-s">
                        <van-icon name="wap-nav" />
                        <div class="collapse-list-left">发放红利</div>
                    </div>
                    <van-icon name="arrow" />
                </div>
                <div class="collapse-list flex-b" @click="toPush(8)">
                    <div class="flex-s">
                        <van-icon name="wap-nav" />
                        <div class="collapse-list-left">额度存款</div>
                    </div>
                    <van-icon name="arrow" />
                </div>
                <div class="collapse-list flex-b" @click="toPush(9)">
                    <div class="flex-s">
                        <van-icon name="wap-nav" />
                        <div class="collapse-list-left">下级代存</div>
                    </div>
                    <van-icon name="arrow" />
                </div>
            </div>
		</div>
		<van-button class="login-out" type="info" color="#00459E" block @click="toPush(5)">退出登陆</van-button>
        <div class="version-show flex-c">V{{ API.version }}</div>
        <van-popup v-model="showConfirm" class="logout-pop">
            <div class="confirm-loginout">
                <div class="confirm-loginout-title flex-c">安全退出</div>
                <div class="confirm-loginout-intro flex-c">请确认是否退出当前登录账号</div>
                <div class="confirm-loginout-button flex-c">
                    <span class="flex-c" @click="showConfirm = false">取消</span>
                    <span class="flex-c" @click="logout()">确认</span>
                </div>
            </div>
        </van-popup>
	</div>
</template>

<script>
import {Toast} from 'vant'
export default {
	name: 'my',
	components: {

	},
	data() {
		return {
			loginName: "",
			iconUrl: "",
			level: 0,
			cash: 0,
			choseList: false,
			isActive: true,
			showConfirm: false,
			popupVisible: false,
			avatarList: [],
			avatarAddress: '',
			avatarId: '',
			userAvatar: require("../../../static/images/agent-avatar-demo.png"),
			unReadNum: 0,
			hasFavorTeam: false,
			userData:{},
      cashManage:false
            // activeNames:['1']
		}
	},
	mounted() {
		this.loadTop();
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	created() {
	    this.handleLoginMark()
	},
	methods: {
        handleLoginMark(){
            if(sessionStorage.getItem('loginMark') === '1'){
                sessionStorage.setItem('loginMark','0')
                location.reload()
            }
        },
		loadTop() {
			this.isActive = true
			this.userInfo()
		},
		refreshBalance() {
			this.loadTop()
		},
		userInfo() {
			this.ServerAPI.postAPI(this.API.userInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.isActive = false
						this.userData = data.data
            localStorage.setItem("userData", JSON.stringify({
              ...this.userData,
              isBind:!!(this.userData.phone || this.userData.email),
            }))
					}else if(data.code === '9000') {
						this.setLogin(false);
            localStorage.setItem("holdPlan", false);
            localStorage.setItem("isLogin", false);
            localStorage.removeItem("userData")
						this.$router.replace({path: '/login'});
					}
				}
			})
		},
		noImg() {
			this.userAvatar = '../../../static/images/head-icon-1.png';
		},
		toPush(id) {
			switch (id) {
				case 1:
					this.$router.push("/extract")
					break
				case 2:
					this.$router.push("/userInfo")
					break
				case 3:
					this.$router.push("/promoteData")
					break
				case 4:
					this.$router.push("/safeCenter")
					break
				case 5:
					this.showConfirm = true;
					break
				case 6:
					this.$router.push("/help")
					break
				case 7:
					this.$router.push("/giveCashBonus")
					break
				case 8:
					this.$router.push("/limitDeposit")
					break
				case 9:
					this.$router.push("/depositToLow")
					break
			}
		},
		logout() {
			this.showConfirm = false
			this.ServerAPI.postAPI(this.API.logout, null, () => {
			});
			this.setLogin(false);
			this.$router.replace("/login");
		},
	}
}
</script>
<style lang="scss" scoped>
.my {
	width: 100%;
	// height: 100vh;
    padding-bottom: 1.2rem;
	background: rgb(246,246,246);
	.fixed-box {
		width: 100%;
		.my-top {
			width: 100%;
			height: 2.6rem;
			display: flex;
			background: url("../../../static/images/agentMyTop.png") no-repeat;
			background-size: 100% 100%;
			align-items: center;
			.my-top-body {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-bottom: -.4rem;
				.icon-name {
					display: flex;
					align-items: center;
					.user-icon {
						margin-left: .5rem;
						img {
							width: 1.3rem;
							height: 1.3rem;
						}
					}
					.user-info {
						margin-left: .1rem;
						.user-name {
							display: flex;
							align-items: center;
							font-weight: bold;
							.user-name-fonts {
								color: rgb(41,41,41);
								font-size: .32rem;
								width: 3rem;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						.user-time {
							display: inline-block;
							font-size: .26rem;
							padding: 0 .15rem;
							color: rgb(255,156,0);
							border: rgb(255,156,0) 1px solid;
							border-radius: .2rem;
						}
					}
				}
				.vip-level {
					width: .85rem;
					height: .3rem;
				}
				.to-help {
					width: .5rem;
					height: .5rem;
					margin-right: .7rem;
				}
			}
		}
		.balance-area {
			background: #FFFFFF;
			border-radius: .15rem;
			overflow: hidden;
			width: 92%;
			margin: 0 auto;
			.balance-area-title {
				height: .7rem;
				display: flex;
				align-items: center;
				padding: 0 .4rem;
				background: rgb(49,49,49);
				.balance-area-title-icon {
					height: .35rem;
				}
				.balance-area-title-fonts {
					font-size: .24rem;
					line-height: .7rem;
					margin-left: .2rem;
					color: rgb(217,191,160);
					font-weight: bold;
				}
			}
			.balance-area-content {
				height: 1.5rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:0 .3rem;
				.balance-area-content-left {
					display: flex;
					align-items: center;
					.balance-area-content-left-fonts {
						color: rgb(104,102,102);
						font-size: .28rem;
					}
					.balance-area-content-left-cash {
						color: rgb(41,41,41);
						font-weight: bold;
						margin-right: .1rem;
					}
				}
				.balance-area-content-center {
					height: .8rem;
					width: 1px;
					background: rgb(238,238,238);
				}
				.balance-area-content-right {
					width: 1.3rem;
					height: .6rem;
				}
			}
		}
	}
	.my-content {
		width: 92%;
		margin: .5rem auto 0;
		color: rgb(108,108,108);
		font-weight: bold;
		.my-content-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 .3rem;
			height: 1rem;
			border-radius: .15rem;
			overflow: hidden;
			background: #FFFFFF;
			margin-bottom: .2rem;
            // box-shadow: 0px 0px 4px 0px rgba(0,0,0,.2);
			.my-content-list-left {
				display: flex;
				align-items: center;
                .img-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 0.8rem;
                    .my-content-list-left-icon {
                        height: .5rem;
				    }
                }
			}
			.my-content-list-right {
				height: .3rem;
			}
		}
        .collapse-list-box {
            background: #FFFFFF;
            border-radius: .15rem;
            height: 1rem;
            overflow: hidden;
            transition: all .6s;
            .my-content-list {
                margin-bottom: 0;
                .my-content-list-right {
                    transform: rotate(90deg);
                    margin-right: .04rem;
                    transition: all .4s;
                }
                .list-icon-activing {
                    transform: rotate(270deg);
                }
            }
            .collapse-list {
                height: 0.8rem;
                padding: 0 .28rem 0 1.08rem;
                border-top: #EEEEEE 1px solid;
                .collapse-list-left {
                    font-size: .24rem;
                    margin-left: .14rem;
                }
            }
        }
        .collapse-list-box-activing {
            height: 3.4rem;
            transition: all .6s;
        }
	}
	.login-out {
		width: 80%;
		margin: .76rem auto 0;
		border-radius: .15rem;
	}
	.discount-show {
		display: block;
		text-align: center;
		margin-top: 3.9rem;
		background: #FFFFFF;
		padding: .2rem 0;
		position: relative;
		z-index: 8;
		img {
			width: 90%;
			height: auto;
		}
		.img-fonts {
			position: absolute;
			width: 2.5rem;
			color: #FFFFFF;
			top: .45rem;
			right: .5rem;
			text-align: left;
			font-weight: bold;
			font-size: .3rem;
			z-index: 1;
			.img-fonts3 {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: .15rem;
				img {
					width: .4rem;
					margin-left: .15rem;
				}
			}
		}
	}
    .version-show {
        width: 100%;
        // position: fixed;
        // bottom: 1.1rem;
        color: #939393;
        font-size: .26rem;
        margin-top: .2rem;
    }
}
.logout-pop {
    border-radius: .1rem;
    .confirm-loginout {
        width: 6.6rem;
        height: 3rem;
        .confirm-loginout-title {
            color: #000000;
            font-size: .3rem;
            margin-top: .5rem;
        }
        .confirm-loginout-intro {
            font-size: .26rem;
            color: #999999;
            margin-top: .2rem;
        }
        .confirm-loginout-button {
            margin-top: .5rem;
            span {
                width: 2.6rem;
                height: .8rem;
                line-height: .8rem;
                background: #D2D2D2;
                color: #FFFFFF;
                border-radius: .08rem;
            }
            span:last-child {
                width: 2.6rem;
                height: .8rem;
                background: #00459E;
                margin-left: .24rem;
            }
        }
    }
}
</style>
